<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello bootstrap</title>
    <!--导入bootstrap的主样式-->
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <style type="text/css">
        p[class^="bg-"] {
            padding: 20px 15px;
        }
        body {
            /*padding-top: 70px;*/
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-default navbar-static-top-top navbar-inverse">
    <!--<div class="container-fluid">-->
    <div class="container">
        <!-- 做当视窗的大小小于 768px 时，把导航栏收缩起来的样式 -->
        <div class="navbar-header">
            <!-- 整个导航栏收缩后形成的一个按钮 -->
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#my_nav">
                <span class="sr-only">针对特殊设备</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <!--<span class="glyphicon glyphicon-search"></span>-->
            </button>
            <!-- 如果想显示品牌的图片，这里可以把文件替换成 img src="图片位置" -->
            <a href="#" class="navbar-brand">品牌LOGO</a>
        </div>

        <!-- navbar中的内容 -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
            <li class="dropdown">
                <button href="#" class="btn btn-default navbar-btn dropdown-toggle" data-toggle="dropdown">菜单3
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="">子菜单1</a></li>
                    <li><a href="">子菜单2</a></li>
                    <li><a href="">子菜单3</a></li>
                </ul>
            </li>
            <li><a href="#">菜单4</a></li>
        </ul>

        <form class="navbar-form navbar-right">
            <div class="form-group">
                <div class="input-group">
                    <!-- 自定义搜索框的宽度：请自行在 form-control样式后添加 width -->
                    <input type="search" class="form-control" name="search" placeholder="请输入要查询的关键字" style="width: 370px;">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
                    </span>
                </div>
            </div>
        </form>

        <ul class="nav navbar-nav navbar-right">
            <li><a href="#">菜单5</a></li>
        </ul>


    </div>
</nav>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="progress">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                    60%
                </div>
            </div>

            <p class="bg-success">今天天气不错</p>
            <p class="bg-success">今天天气不错</p>
            <p class="bg-success">今天天气不错</p>
            <p class="bg-success">今天天气不错</p>
            <p class="bg-success">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="text-primary">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
            <p class="label-danger">今天天气不错</p>
        </div>
    </div>

</div>

<!-- 导入js文件 -->
<script type="text/javascript" src="component/jquery/jquery.min.js"></script>
<script type="text/javascript" src="component/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>